<template>
	<div>
		<betting-combo :data="sportIds" inline class="text-t-1" />
		<div
			v-for="(item, index) in data.list"
			:key="item.id"
			class="items-center text-sm leading-[16px] text-t-2 truncate">
			<betting-name
				:id="getSelection(item, index)?.id"
				:betslipLine="getSelection(item, index)?.betslipLine"
				:points="getSelection(item, index)?.points"
				:side="getSelection(item, index)?.side" />
			<betting-odds :value="getSelection(item, index)?.displayOdds" at class="ml-1" />
			<!-- {{ matchStore.getMarket(item.eventId, item.marketId)?.marketTypeName }} -->
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BettingCombo, BettingName, BettingOdds } from '@/components/betting'
import { computed, PropType } from 'vue'
import { BetslipComboType, BetslipInfoType } from '@/types'
import { SportsType } from '@/enums'
import { useMatchStore } from '@/store'

const props = defineProps({
	data: {
		type: Object as PropType<BetslipComboType>,
		required: true
	}
})

const matchStore = useMatchStore()

const getSelection = (item: BetslipInfoType, index: number) => {
	const selection = matchStore.getSelection(item.eventId, item.marketId, item.id)
	if (selection) {
		return selection
	} else if (props.data?.selections) {
		return props.data?.selections[index]
	}
}

const sportIds = computed(() => {
	const res: SportsType[] = []
	props.data?.list?.map((item, index) => {
		if (props.data?.selections) {
			res.push(props.data?.selections[index].sportId)
		} else if (matchStore.getMatch(item.eventId)?.sportId) {
			res.push(matchStore.getMatch(item.eventId)?.sportId)
		}
	})
	return res
})
</script>
